Gather.Town のカスタムマップで設定出来る前景画像(foreground image)を作成＆設定する手順
Gather.Townでは予め用意されているスペースマップの他に、自作したマップをスペース上に定義して使うことも出来ます。カスタムマップ作成の手順については下記エントリで紹介しました。
ですが、上記エントリでは一部設定の手順を省いて内容を紹介していました。そこでエントリでは、Gather.Townで既に作成済みの「背景画像」に対応する「前景画像」を作成してGather.Townに設定する(ここが省略していたところ)際の手順を、『Tiled』というツールを使って行った際の手順について実例を交えて紹介します。
目次
- Gather.Townでの「背景画像」のエクスポート(ダウンロード)
- タイルマップエディタ『Tiled』のインストール
- マップの作成と背景画像の取り込み
- 前景画像の準備(レイヤーの作成)
- 前景画像の準備(タイルセットの取り込み)
- Gather.TownのMapmakerで前景画像の設定
- まとめ
Gather.Townでの「背景画像」のエクスポート(ダウンロード)
設定・作成した背景画像をエクスポートするには、Mapmakerの編集メニューの一番左にあるところから「Download Background」を実行します。別途画像が表示されるので、任意の名前で保存してください。
ダウンロードした画像は以下のような感じです。編集時には「床(Tiles)」と「壁(Walls)」が描画出来るので、その部分が背景画像として生成された感じです。ちなみに画像サイズは32x32ピクセルの正方形を並べる形でマス指定する形になるので、それぞれのピクセル数を32で割ればその画像のサイズが縦横何マス取っているのかが分かります。今回作成した場合は
- 横サイズ：1344 / 32 = 42マス
- 縦サイズ：2240 / 32 = 70マス
を取っている事になります。
タイルマップエディタ『Tiled』のインストール
Gather.Townでルームを作成する際の基準は前述のように「32x32ピクセル」のマスを最小粒度の単位とした要素を並べる形で構成されています。Gather.Townの機能「Mapmaker」で組み上げて行くのも良いですが、専用のツールで素材を活用しながら作るのも便利ですし楽チンです。(私個人的にはある程度Mapmakerで作り慣れてからこのツールの存在を知りました)
今回、画像加工を行うためのツールとして「Tiled」というものを使います。
こちらのツールの基本的な使い方自体は下記のブログに良い感じにまとまっているので、詳しくはそちらをご覧ください。当エントリでは背景画像を作るために行ったTiledの手順にのみフォーカスする形で進めていきます。
ツールのインストーラ自体は下記からダウンロード可能。今回はMacOS版を入手しました。
アプリケーションを起動。メニューの日本語化に対応しているので[Preferences]→[Interface]で表示言語を日本語(Japanese)に切り替えます。
マップの作成と背景画像の取り込み
[新しいマップ]をクリックし、種類には[□型タイル(長方形マップ)]、タイルの大きさについては、Gather.Townでの規定である[32x32ピクセル]になっていることを確認してください。マップの大きさは[Fixed]かつ指定のサイズ(タイル数)を入力します。今回は前述手順で縦横サイズを割り出していたのでその値を指定。値の設定後[ファイル名をつけて保存]押下。
設定に用いるファイルば拡張子*.tmxで保存します。
背景画像の取り込みを行います。メニューの[表示]から[ビューとツールバー]→[タイルセット]を選択。
[新しいタイルセット]を押下し、取り込む画像ファイルを指定します。[名前]の部分は自動的にファイル名が拡張子無しで入力される形となりますのでそれで問題なければそのまま[ファイル名を付けて保存]を押下。ファイルが拡張子*.tsxで保存されます。
画像の取り込みが完了しました。初期表示は「取り込んだ画像ファイル」が最前で表示されている場合があるので、一旦マップ側ファイル(*tmx)のタブに戻ります。
取り込んだ画像は「レイヤー」として作成・定義されます。下記画像に記載したように、名称や表示レイアウトを見易い形に調整することが出来ます。
前景画像の準備(レイヤーの作成)
Gather.Townでは「背景(Background)」と「前景(Foreground)」を画像として用意することでそれぞれの画像を「キャラの下に表示する内容(背景)」「キャラよりも上の表示順位で見せる画像(前景)」として設定することが出来ます。
背景画像は前述手順で取り込みました。次は「前景画像」を作成していく手順を紹介します。
まず、画像として別のファイルを用意する前に、背景に沿った形の前景画像をする必要があります。Tiledでは「レイヤー」という概念で1つのマップ画像を作り上げていくことが出来ます。レイヤービューにて右クリックから[新規]→[Tile Layer]を選択。
新たなタイルレイヤーが作成出来ました。併せて名前も変更しています。このレイヤービューでは、要素の右横にある目のアイコンで表示/非表示の切り替えを、
また、レイヤーを選択した状態で[透過度]スライダーを調整することで対象レイヤーの透明度を調整することが出来ます。今回新たに作りたいのは「前景画像」なので(背景画像は参考にはするが内容自体は弄らない)、背景画像をちょっと透かした状態で前景画像の調整をしやすくしました。
前景画像の準備(タイルセットの取り込み)
Gather.Townで公式に提供されているPublic Tileセットは以下から入手可能です。今回の前景画像もここの素材を使います。
利用出来るタイルセットは、入手したzipファイルを解凍したコンテンツの中のmapmaking-master/tilesets配下と、
mapmaking-master/old files/0/tilesets配下にありました。(今回はこちらのファイルを用います)
前景として定義したレイヤーに、画像ファイルを追加します。ツール上の操作としては、ドラッグアンドドロップでも取り込んでくれるようです。取り込んだタイルセットの中にある要素の中から、取り込みたい要素があるセルを範囲選択した上で、
任意の位置にカーソルを置いていくと、その位置に画像を配置してくれます。
位置内容を確認出来たら、保存の上対象画像を「前景画像」としてエクスポートします。今回エクスポートしたいのは前景画像のみなので、背景画像を非表示とした(目のアイコンをクリック)上で、メニューの[ファイル]→[画像でエクスポート]を選択。
任意のファイル名で画像として保存します。
Gather.TownのMapmakerで前景画像の設定
Gather.Townで、作成した画像を「前景画像」として設定します。Mapmakerメニューで[Update foreground]→[Upload a foreground]を選択。
画像ファイルがアップロードされ、背景画像の上に乗る形で設定されます。今回は1344 x 2240ピクセルのサイズで前景画像として設定した要素は1個だけ、その他は全て透過状態のPNG画像としています。なので前景画像として指定した部分だけ、下記のような形で重なって見える様になっています。定義として保存すると、内容が反映されます。
下記は設定前→設定保存後の該当箇所の見え方の違いを並べたものです。保存後のレイアウトが、ユーザーの上に被さる形で要素を表示する形になっているのが確認出来ました。
この様に、Gather.Townでは「背景画像」と「前景画像」を上手く使う事によって、立体的なレイアウトを表現することが可能です。また、背景画像についても、タイルセットを有効活用しつつ、「複数のレイヤーを1枚の背景画像」として作成・エクスポートすることでより多層的なものを作れるかと思います。 アイデア次第で面白い構成も組めると思うので是非色々チャレンジしてみてください。
まとめ
という訳で、前景画像を「Tiled」というツールで作成し、合成する際の手順に関する紹介でした。
「Tiled」を使うとより表現力の高い、それでいて面白い背景・前景画像を作れることが分かったので、今後もアイデアを元に色々Gather.Townのスペース・マップを作成していきたいと思います！
